<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="referrer" content="no-referrer" />
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <title></title>
  <script src="./es/dom-to-image.js" type="module"></script>

  <style>
    .c-m-box {
      position: relative;
    }

    .c-m-list {
      position: relative;
      background: url(./img/index-bg.png)center top no-repeat;
      background-size: 100% auto;
      overflow: hidden;
      height: 1300px;
    }

    .btn-list {
      padding-bottom: 10px;

    }
  </style>

</head>

<body>

  <div id="cmBox" class="c-m-box">
    <div class="dom-image">
      <div class="c-m-list">
      </div>
    </div>
    <div class="btn-list">
      <button class="button" onclick="createImg('toSvg')">生成SVG图片</button>
      <button class="button" onclick="createImg('toJpg')">生成JPG图片</button>
      <button class="button" onclick="createImg('toPng')">生成PNG图片</button>
      <button class="button" onclick="createImg('toCanvas')">生成canvas展示</button>
      <button class="button" onclick="createImg('toBlob')">生成toBlob图片</button>
    </div>
  </div>
  <script type="module">
    import DomToImage from './es/dom-to-image.js';
    console.log(DomToImage)
    var node = document.querySelector('.dom-image')
    window.domtoimage = new DomToImage({ targetNode: node, bgColor: '#fff' });
  </script>
  <script type="text/javascript">

    //imagePlaceholder:'https://www.pngkey.com/png/detail/233-2332677_image-500580-placeholder-transparent.png'
    function createImg (type) {

      window.domtoimage[type]()
        .then(function (dataUrl) {
          if (type === 'toCanvas') {
            document.body.appendChild(dataUrl);
          } else if (type === 'toSvg') {
            document.body.appendChild(dataUrl);

          } else {
            if (type === 'toBlob') {
              dataUrl = URL.createObjectURL(dataUrl)
              console.log(dataUrl);
            }
            const img = new Image();
            img.src = dataUrl;
            document.body.appendChild(img);
            document.body.appendChild(document.createElement('br'));
          }

        })
        .catch(function (error) {
          console.error('oops, something went wrong!', error);
        });
    }

    function createDocumentFragment (txt) {
      const template = `<div class='child'>${txt}</div>`;
      let frag = document.createRange().createContextualFragment(template);
      return frag;
    }

  </script>
</body>

</html>